<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>客户端管理</title>
    <link rel="icon" href="../assets/images/favicon.ico"/>
    <link rel="stylesheet" href="../assets/libs/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../assets/libs/tagsinput/jquery.tagsinput-revisited.min.css" media="all">
    <link rel="stylesheet" href="../assets/common.css" media="all">
</head>

<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div>
                <button id="clientBtnAdd" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加客户端</button>
            </div>

            <table id="clientTable" lay-filter="clientTable" class="layui-table"></table>
        </div>
    </div>
</div>

<!-- 表单页面 -->
<script type="text/html" id="clientForm">
    <form class="layui-form model-form" lay-filter="clientForm">
        <div class="layui-form-item">
            <label class="layui-form-label lable-require">客户端名称:</label>
            <div class="layui-input-block">
                <input name="client_name" placeholder="请输入客户端名称" type="text" class="layui-input"
                       maxlength="40" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">RedirectUri:</label>
            <div class="layui-input-block">
                <input name="redirect_uri" type="text"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">Scope:</label>
            <div class="layui-input-block">
                <input name="scope" type="text"/>
            </div>
        </div>
        <div class="layui-form-item text-right" style="margin-bottom: 25px;">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button type="button" class="layui-btn" lay-filter="btnClientSubmit" lay-submit>保存</button>
        </div>
    </form>
</script>
<!-- 详情页面 -->
<script type="text/html" id="clientInfo">
    <div class="layui-form model-form" lay-filter="clientInfo">
        <div class="layui-form-item">
            <label class="layui-form-label">客户端名称:</label>
            <div class="layui-input-block">
                <input name="client_name" type="text" class="layui-input" readonly="readonly"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">client_id:</label>
            <div class="layui-input-block">
                <input name="client_id" type="text" class="layui-input" readonly="readonly"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">client_secret:</label>
            <div class="layui-input-block">
                <input name="raw_client_secret" type="text" class="layui-input" readonly="readonly"/>
            </div>
        </div>
        <div class="layui-form-item text-right" style="margin-bottom: 25px;">
            <button class="layui-btn layui-btn-primary" ew-event="closeDialog">关闭</button>
            <button id="btnCopy" class="layui-btn">复制</button>
        </div>
    </div>
</script>
<!-- 表格操作列 -->
<script type="text/html" id="clientTableBar">
    <a class="layui-btn layui-btn-xs" lay-event="show">详情</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript" src="../assets/libs/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../assets/libs/jquery/clipboard.min.js"></script>
<script type="text/javascript" src="../assets/libs/tagsinput/jquery.tagsinput-revisited.min.js"></script>
<script type="text/javascript" src="../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../assets/common.js"></script>
<script>
    layui.use(['layer', 'form', 'table', 'util','admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var admin = layui.admin;

        // 渲染表格
        table.render({
            elem: '#clientTable',
            url: base_server + 'oauth/client',
            page: false,
            where: {
                access_token: admin.getToken().access_token
            },
            cellMinWidth: 100,
            cols: [[
                {type: 'numbers'},
                {field: 'client_id', title: 'client_id'},
                {field: 'client_name', title: '客户端'},
                {
                    title: 'Scope', templet: function (d) {
                        var str = '';
                        for (var i = 0; i < d.scope.length; i++) {
                            str += ('<span class="layui-badge-rim">' + d.scope[i] + '</span>');
                        }
                        return str;
                    }
                },
                {
                    title: 'Redirect_Uri', templet: function (d) {
                        var str = '';
                        for (var i = 0; i < d.redirect_uri.length; i++) {
                            str += ('<span class="layui-badge-rim">' + d.redirect_uri[i] + '</span>');
                        }
                        return str;
                    }
                },
                {toolbar: '#clientTableBar', align: 'center', title: '操作', unresize: true, width: 180}
            ]],
            response: {
                statusCode: 200
            },
            skin: 'line',
            size: 'lg'
        });

        // 添加按钮点击事件
        $('#clientBtnAdd').click(function () {
            showEditModel();
        });
        // 工具条点击事件
        table.on('tool(clientTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'edit') { // 修改
                showEditModel(data);
            } else if (layEvent === 'del') { // 删除
                doDelete(obj.data.client_id);
            } else if (layEvent === 'show') { // 详情
                layer.open({
                    type: 1,
                    title: '客户端信息',
                    area: '360px',
                    offset: '65px',
                    content: $('#clientInfo').html(),
                    success: function () {
                        form.val('clientInfo', data);
                        var obj = new Object();
                        obj.client_name = data.client_name;
                        obj.client_id = data.client_id;
                        obj.raw_client_secret = data.raw_client_secret;
                        $('#btnCopy').attr('data-clipboard-text', JSON.stringify(obj));
                        var clipboard = new ClipboardJS('#btnCopy');
                        clipboard.on('success', function (e) {
                            e.clearSelection();
                            layer.msg('复制成功', {icon: 1});
                        });
                        clipboard.on('error', function (e) {
                            layer.msg('复制失败，请手动复制', {icon: 1});
                        });
                    }
                });
            }
        });

        // 删除
        function doDelete(client_id) {
            layer.confirm('确定删除此客户端吗？', {
                offset: '65px',
            }, function (i) {
                layer.close(i);
                layer.load(2);
                admin.req('oauth/client/' + client_id, {}, function (data) {
                    layer.closeAll('loading');
                    if (data.code == 200) {
                        layer.msg('删除成功', {icon: 1});
                        table.reload('clientTable');
                    } else {
                        layer.msg('删除失败', {icon: 2});
                    }
                }, 'DELETE');
            });
        }

        // 显示表单弹窗
        function showEditModel(data) {
            layer.open({
                type: 1,
                title: data ? '修改' : '添加' + '客户端',
                area: '360px',
                offset: '65px',
                content: $('#clientForm').html(),
                success: function () {
                    initEditForm(data);
                }
            });
        }

        // 回显表单
        function initEditForm(data) {
            // 回显数据
            if (data) {
                var newScope = '';
                for (var i = 0; i < data.scope.length; i++) {
                    if (i != 0) {
                        newScope += ',';
                    }
                    newScope += data.scope[i];
                }
                data.scope = newScope;
                var newUri = '';
                for (var i = 0; i < data.redirect_uri.length; i++) {
                    if (i != 0) {
                        newUri += ',';
                    }
                    newUri += data.redirect_uri[i];
                }
                data.redirect_uri = newUri;
                form.val('clientForm', data);
            }
            // 渲染标签输入框
            $('input[name=redirect_uri]').tagsInput({
                placeholder: '+ 添加 Redirect Uri'
            });
            $('input[name=scope]').tagsInput({
                placeholder: '+ 添加 Scope'
            });
            // 表单提交事件
            form.on('submit(btnClientSubmit)', function (d) {
                layer.load(2);
                if (d.field.scope) {
                    d.field.scope = d.field.scope.split(',');
                } else {
                    d.field.scope = [];
                }
                if (d.field.redirect_uri) {
                    d.field.redirect_uri = d.field.redirect_uri.split(',');
                } else {
                    d.field.redirect_uri = [];
                }
                admin.ajax({
                    url: base_server + 'oauth/client' + (data ? ('/' + data.client_id) : ''),
                    type: data ? 'PUT' : 'POST',
                    dataType: 'json',
                    data: JSON.stringify(d.field),
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                    success: function (res) {
                        layer.closeAll('loading');
                        layer.closeAll('page');
                        if (res.code == 200) {
                            layer.msg('操作成功', {icon: 1});
                            table.reload('clientTable');
                        } else {
                            layer.msg('操作失败', {icon: 2});
                        }
                    }
                });
                return false;
            });
        }

    });
</script>
</body>
</html>